<template>
  <view :style="DynamicHeight">
    <!-- 导航栏 -->
    <u-navbar :title="title" placeholder @leftClick="back"></u-navbar>
    <view v-show="value1 == 0">
      <!-- 头部 -->
      <view class="header">
        <view class="header-item" @click="navTo('待处理', 1)">
          <image src="@/static/apply/01.png"></image>
          <view>待处理</view>
        </view>
        <view class="header-item" @click="navTo('已处理', 2)">
          <image src="@/static/apply/03.png"></image>
          <view>已处理</view>
        </view>
        <view class="header-item" @click="navTo('已发起', 3)">
          <image src="@/static/apply/02.png"></image>
          <view>已发起</view>
        </view>
        <view class="header-item" @click="navTo('我收到的', 4)">
          <image src="@/static/apply/04.png"></image>
          <view>我收到的</view>
        </view>
      </view>
      <!-- menu -->
      <view class="apply-menu">
        <up-tabs :list="tabs" :current="currentTab" @click="click"></up-tabs>
        <!-- 菜单 -->
        <view :style="contentDynamicHeight">
          <up-grid v-if="tabListObject?.detail?.length != 0" class="grid-view" :border="false">
            <up-grid-item v-for="(item, index) in tabListObject.detail" :key="index" @click="click1(item)"
              class="grid-item">
              <view class="icon-container"
                :style="{ display: 'flex', alignItems: 'center', justifyContent: 'center', backgroundColor: item?.logo?.background, borderRadius: '10rpx', width: '50px', height: '50px' }">
                <text v-if="item.logo.icon" :class="item.logo.icon" class="grid-icon-text"></text>
              </view>
              <view class="grid-text">{{ item.formName }}</view>
            </up-grid-item>
          </up-grid>
          <view v-else>
            <image class="img" src="@/static/apply/null.png"></image>
            <view class="text">暂无单据</view>
          </view>
        </view>

      </view>
    </view>
    <!-- 统计 -->
    <view v-if="value1 == 1">
      <oaApprovalStatistics></oaApprovalStatistics>
    </view>
    <!-- 底部导航 -->
    <u-tabbar :value="value1" :safeAreaInsetBottom="true" @change="handleTabChange" activeColor="#2979ff">
      <u-tabbar-item text="首页" icon="home"></u-tabbar-item>
      <u-tabbar-item text="统计">
        <template #active-icon>
          <image :style="{ width: iconSize, height: iconSize }" src="@/static/appy-icon/tjxz.png"></image>
        </template>
        <template #inactive-icon>
          <image :style="{ width: iconSize, height: iconSize }" src="@/static/appy-icon/tj.png"></image>
        </template>
      </u-tabbar-item>
    </u-tabbar>
  </view>
</template>

<script>
import oaApprovalStatistics from '@/pages/apply/home/oaApprovalStatistics.vue'
import apply from "@/apis/cloud/apply.js";
export default {
  components: {
    oaApprovalStatistics
  },
  data () {
    return {
      height: 0,
      DynamicHeight: {},
      contentDynamicHeight: {},
      value1: 0,
      currentTab: 0,
      tabs: [{
        name: "人事管理",
      }, {
        name: "采购管理"
      }, {
        name: "仓库管理"
      }, {
        name: "财务管理"
      }],
      tabName: '',
      tabList: [], //处理审批单数组
      tabListObject: {},
      iconSize: '20px', // 控制图标大小 
      title: 'OA审批'
    }
  },
  async onLoad (value) {
    this.value1 = Number(value?.index) || 0
    await this.setMenu()
  },
  onShow () {
    const savedTab = uni.getStorageSync('OAcurrentTab');
    if (savedTab !== undefined && this.tabs.length > 0) {
      this.restoreTab(savedTab);
    }
  },
  computed: {

  },
  created () {
    this.height = (uni.getSystemInfoSync().windowHeight || uni.getSystemInfoSync().screenHeight) || 0
    // #ifdef APP-PLUS
    this.DynamicHeight = { height: `${this.height - 51}px`, overflowY: 'hidden' }
    this.contentDynamicHeight = { height: `${this.height - 241}px`, overflowY: 'auto' }
    // #endif

    // #ifdef H5
    this.DynamicHeight = { height: `${this.height - 52}px`, overflowY: 'hidden' }
    this.contentDynamicHeight = { height: `${this.height - 220}px`, overflowY: 'auto' }
    // #endif
  },
  methods: {
    handleTabChange (index) {
      if (index == 0) {
        this.currentTab = 0
        this.setMenu()

      }
      this.title = index == 0 ? 'OA审批' : '统计'
      this.value1 = index;
    },
    async setMenu () {
      // 显示加载框
      uni.showLoading({
        title: '加载中...'
      });
      const menuMsg = await apply.getApplyMenu({
        keywords: ''
      });
      uni.hideLoading();
      if (menuMsg.status == 1) {
        this.tabList = menuMsg.data;
        this.tabs = [];
        const filteredNames = ['采购管理-erp', '仓库管理', '销售管理-erp', '财务管理-erp'];
        this.tabList.forEach(item => {
          // 如果当前项的名称不在过滤列表中，则添加到 tabs 中
          if (!filteredNames.includes(item.name)) {
            let data = {
              name: item.name
            };
            this.tabs.push(data);
          }
        })

        // if (this.tabs.length > 0) {
        //   this.tabName = this.tabs[0].name;
        // } else {
        //   this.tabName = '';
        // }
        // this.getTabList()
        if (this.tabs.length > 0 && !uni.getStorageSync('OAcurrentTab')) {
          this.tabName = this.tabs[0].name;
          this.currentTab = 0;
          this.getTabList();
        }

        if (this.tabs.length > 0) {
          const savedTab = uni.getStorageSync('OAcurrentTab');
          if (savedTab !== undefined) {
            this.restoreTab(savedTab);
          } else {
            this.restoreTab(0); // 默认选第一个
          }
        }
        // 隐藏加载框
        uni.hideLoading();
      } else {
        uni.$u.toast('获取失败，请稍后重试！');
        uni.hideLoading();
      }
    },
    restoreTab (index) {
      this.currentTab = Number(index);
      this.tabName = this.tabs[this.currentTab]?.name || '';
      this.getTabList();
    },
    click (i) {
      this.currentTab = i.index
      this.tabName = i.name
      this.getTabList()
      uni.setStorageSync('OAcurrentTab', i.index);
    },
    click1 (item) {
      uni.navigateTo({
        url: `/pages/apply/form/index?id=${item.id}&formName=${item.formName}审批`
      })
    },
    getTabList () {
      const targetItem = this.tabList.find(item => item.name === this.tabName);
      if (targetItem) {
        if (targetItem.name === '采购管理') {
          const filteredDetail = targetItem.detail.filter(detailItem => detailItem.groupId === 14);
          this.tabListObject = {
            ...targetItem,
            detail: filteredDetail
          };
        } else {
          this.tabListObject = targetItem;
        }
      } else {
        this.tabListObject = {};
      }
      // 隐藏
      uni.hideLoading();
    },
    back () {
      uni.reLaunch({
        url: "/pages/workspace/home/index"
      })
    },
    navTo (str, active) {
      uni.navigateTo({
        url: '/pages/apply/oaList/index?title=' + str + "&active=" + active
      });
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/el.css";

page {
  overflow-x: hidden;
  background-color: #F3F4F5;
}

.header {
  display: flex;
  justify-content: space-around;
  background: linear-gradient(to top, #F5F6F8, #fff);
  // background-color: #fff;
  padding: 30rpx 20rpx;

  .header-item {
    width: 25%;
    text-align: center;
    font-size: 24rpx;

    image {
      width: 50rpx;
      height: 50rpx;
      margin-bottom: 10rpx;
    }
  }
}

.grid-view {
  margin-top: 20rpx;

  // 确保网格项高度一致
  .grid-item {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 10rpx;
    box-sizing: border-box;
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rpx;
    width: 100rpx;
    height: 100rpx;
    margin: 0 auto 10rpx;
  }

  .grid-icon {
    width: 50rpx;
    height: 50rpx;
  }

  .grid-icon-text {
    font-size: 50rpx;
    color: #fff;
  }

  .grid-text {
    font-size: 28rpx;
    text-align: center;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 限制最多显示2行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 80rpx;
    /* 确保最少有2行的高度 */
    line-height: 1.4;
    padding: 0 10rpx;
  }
}

.img {
  width: 200px;
  height: 200px;
  display: block;
  margin: auto;
}

.text {
  text-align: center;
  color: #c6c6c6;
}
</style>